import React, { Component } from 'react';
import { Scroll } from '../common-ui-parts';
import HeadLine, { HEAD_LINE_COLOR } from '../common-ui-parts/HeadLine';
import CommonConstants from '../../constants/CommonConstants';

/**
 * アドバイス：胃がん
 */
class Advice extends Component {
  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { categoryAdvices, smokingAdvices, salineFoodAdvices, familyAnamnesisAdvices } = this.props;
    return (
      <div className="Advice">
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.ADVICE}
          customStyle={CommonConstants.SCROLL_Z}
        >
          <div className="report-card">
            <div className="card-content">
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.BLUE}
              >
                まとめ
              </HeadLine>
              <p>胃がんになる確率が高くても、すぐにあわてる必要はありません。ABC分類の結果は、胃がんのリスクを知るために有用ですが、正しい診断には胃のX線検査や内視鏡検査の結果が重要です。BCD群の方は生活習慣を改善し、がん検診などで胃の検査を定期的に受けるようにしましょう。<br />
                ピロリ菌を除菌すると胃がんのリスクが下がるという研究結果がありますが、ゼロになるわけではありません。また、除菌による不利益の側面に関する情報は不足しています。ピロリ菌感染があり、除菌療法を選択する場合は、症状や胃の詳しい検査をもとにかかりつけ医に相談するとよいでしょう。</p>
            </div>
          </div>
          <div className="report-card">
            <div className="card-content">
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.BLUE}
              >
                あなたへのアドバイス
              </HeadLine>
              <p dangerouslySetInnerHTML={{__html: categoryAdvices}} />
            </div>
            <div className="card-content">
              <HeadLine
                level={3}
                color={HEAD_LINE_COLOR.BLUE}
              >
                喫煙アドバイス
              </HeadLine>
              <p dangerouslySetInnerHTML={{__html: smokingAdvices}} />
            </div>
            <div className="card-content">
              <HeadLine
                level={3}
                color={HEAD_LINE_COLOR.BLUE}
              >
                塩蔵品の摂取アドバイス
              </HeadLine>
              <p dangerouslySetInnerHTML={{__html: salineFoodAdvices}} />
            </div>
            { familyAnamnesisAdvices !== '' ?
              <div className="card-content">
                <HeadLine
                  level={3}
                  color={HEAD_LINE_COLOR.BLUE}
                >
                  胃がんの家族歴アドバイス
                </HeadLine>
                <p dangerouslySetInnerHTML={{__html: familyAnamnesisAdvices}} />
              </div>
              : null
            }
          </div>
        </Scroll>
      </div>
    );
  }
}

/*Advice.propTypes = {
  categoryRisk: React.PropTypes.string,
  categoryAdvices: React.PropTypes.string,
  smokingAdvices: React.PropTypes.string,
  salineFoodAdvices: React.PropTypes.string,
  familyAnamnesisAdvices: React.PropTypes.string,
};*/

export default Advice
